<!DOCTYPE html>
<!-- 
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.1.1
Version: 2.0.2
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->

<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->

<!-- Head BEGIN -->
<head>
  <meta charset="utf-8">
  <title>Buttons | Metronic Shop UI</title>

  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta content="Metronic Shop UI description" name="description">
  <meta content="Metronic Shop UI keywords" name="keywords">
  <meta content="keenthemes" name="author">

  <meta property="og:site_name" content="-CUSTOMER VALUE-">
  <meta property="og:title" content="-CUSTOMER VALUE-">
  <meta property="og:description" content="-CUSTOMER VALUE-">
  <meta property="og:type" content="website">
  <meta property="og:image" content="-CUSTOMER VALUE-"><!-- link to image for socio -->
  <meta property="og:url" content="-CUSTOMER VALUE-">

  <link rel="shortcut icon" href="favicon.ico">
  <link href="/favicon.ico" rel="SHORTCUT ICON" type="image/ico">

  <!-- Fonts START -->
  <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css">
  <link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=all" rel="stylesheet" type="text/css">
  <!-- Fonts END -->

  <!-- Global styles START -->       
  <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <!-- Global styles END --> 
   
  <!-- Page level plugin styles START -->
  <link href="assets/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
  <link href="assets/plugins/bxslider/jquery.bxslider.css" rel="stylesheet">
  <link href="assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
  <!-- Page level plugin styles END -->

  <!-- Theme styles START -->
  <link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css">
  <link href="assets/css/style.css" rel="stylesheet" type="text/css">
  <link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css">  
  <link href="assets/css/custom.css" rel="stylesheet" type="text/css">
  <!-- Theme styles END -->
</head>
<!-- Head END -->

<!-- Body BEGIN -->
<body>
    <!-- BEGIN TOP BAR -->
    <div class="pre-header">
        <div class="container">
            <div class="row">
                <!-- BEGIN TOP BAR LEFT PART -->
                <div class="col-md-6 col-sm-6 additional-shop-info">
                    <ul class="list-unstyled list-inline">
                        <li><i class="fa fa-phone"></i><span>+1 456 6717</span></li>
                        <!-- BEGIN CURRENCIES -->
                        <li class="shop-currencies">
                            <a href="javascript:void(0);">€</a>
                            <a href="javascript:void(0);">£</a>
                            <a href="javascript:void(0);" class="current">$</a>
                        </li>
                        <!-- END CURRENCIES -->
                        <!-- BEGIN LANGS -->
                        <li class="langs-block">
                            <a href="javascript:void(0);" class="current">English <i class="fa fa-angle-down"></i></a>
                            <div class="langs-block-others-wrapper"><div class="langs-block-others">
                              <a href="javascript:void(0);">French</a>
                              <a href="javascript:void(0);">Germany</a>
                              <a href="javascript:void(0);">Turkish</a>
                            </div></div>
                        </li>
                        <!-- END LANGS -->
                    </ul>
                </div>
                <!-- END TOP BAR LEFT PART -->
                <!-- BEGIN TOP BAR MENU -->
                <div class="col-md-6 col-sm-6 additional-nav">
                    <ul class="list-unstyled list-inline pull-right">
                        <li><a href="#">My Account</a></li>
                        <li><a href="#">My Wishlist</a></li>
                        <li><a href="checkout.html">Checkout</a></li>
                        <li><a href="login-page.html">Log In</a></li>
                    </ul>
                </div>
                <!-- END TOP BAR MENU -->
            </div>
        </div>        
    </div>
    <!-- END TOP BAR -->

    <!-- BEGIN HEADER -->
    <div role="navigation" class="navbar header no-margin">
        <div class="container">
            <div class="navbar-header">
                <!-- BEGIN RESPONSIVE MENU TOGGLER -->
                <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!-- END RESPONSIVE MENU TOGGLER -->
                <a href="index.html" class="navbar-brand"><img src="assets/img/logo_red.png" alt="Metronic Shop UI"></a><!-- LOGO -->
            </div>
            <!-- BEGIN CART -->
            <div class="cart-block">
                <div class="cart-info">
                    <a href="javascript:void(0);" class="cart-info-count">3 items</a>
                    <a href="javascript:void(0);" class="cart-info-value">$1260</a>
                </div>
                <i class="fa fa-shopping-cart"></i>
                <!-- BEGIN CART CONTENT -->
                <div class="cart-content-wrapper">
                  <div class="cart-content">
                    <ul class="scroller" style="height: 250px;">
                      <li>
                        <a href="item.html"><img src="assets/temp/cart-img.jpg" alt="Rolex Classic Watch" width="37" height="34"></a>
                        <span class="cart-content-count">x 1</span>
                        <strong><a href="item.html">Rolex Classic Watch</a></strong>
                        <em>$1230</em>
                        <a href="javascript:void(0);" class="del-goods"><i class="fa fa-times"></i></a>
                      </li>
                      <li>
                       <a href="item.html"><img src="assets/temp/cart-img.jpg" alt="Rolex Classic Watch" width="37" height="34"></a>
                        <span class="cart-content-count">x 1</span>
                        <strong><a href="item.html">Rolex Classic Watch</a></strong>
                        <em>$1230</em>
                        <a href="javascript:void(0);" class="del-goods"><i class="fa fa-times"></i></a>
                      </li>
                      <li>
                        <a href="item.html"><img src="assets/temp/cart-img.jpg" alt="Rolex Classic Watch" width="37" height="34"></a>
                        <span class="cart-content-count">x 1</span>
                        <strong><a href="item.html">Rolex Classic Watch</a></strong>
                        <em>$1230</em>
                        <a href="javascript:void(0);" class="del-goods"><i class="fa fa-times"></i></a>
                      </li>
                      <li>
                        <a href="item.html"><img src="assets/temp/cart-img.jpg" alt="Rolex Classic Watch" width="37" height="34"></a>
                        <span class="cart-content-count">x 1</span>
                        <strong><a href="item.html">Rolex Classic Watch</a></strong>
                        <em>$1230</em>
                        <a href="javascript:void(0);" class="del-goods"><i class="fa fa-times"></i></a>
                      </li>
                      <li>
                        <a href="item.html"><img src="assets/temp/cart-img.jpg" alt="Rolex Classic Watch" width="37" height="34"></a>
                        <span class="cart-content-count">x 1</span>
                        <strong><a href="item.html">Rolex Classic Watch</a></strong>
                        <em>$1230</em>
                        <a href="javascript:void(0);" class="del-goods"><i class="fa fa-times"></i></a>
                      </li>
                      <li>
                       <a href="item.html"><img src="assets/temp/cart-img.jpg" alt="Rolex Classic Watch" width="37" height="34"></a>
                        <span class="cart-content-count">x 1</span>
                        <strong><a href="item.html">Rolex Classic Watch</a></strong>
                        <em>$1230</em>
                        <a href="javascript:void(0);" class="del-goods"><i class="fa fa-times"></i></a>
                      </li>
                      <li>
                        <a href="item.html"><img src="assets/temp/cart-img.jpg" alt="Rolex Classic Watch" width="37" height="34"></a>
                        <span class="cart-content-count">x 1</span>
                        <strong><a href="item.html">Rolex Classic Watch</a></strong>
                        <em>$1230</em>
                        <a href="javascript:void(0);" class="del-goods"><i class="fa fa-times"></i></a>
                      </li>
                      <li>
                        <a href="item.html"><img src="assets/temp/cart-img.jpg" alt="Rolex Classic Watch" width="37" height="34"></a>
                        <span class="cart-content-count">x 1</span>
                        <strong><a href="item.html">Rolex Classic Watch</a></strong>
                        <em>$1230</em>
                        <a href="javascript:void(0);" class="del-goods"><i class="fa fa-times"></i></a>
                      </li>
                    </ul>
                    <div class="text-right">
                      <a href="shopping-cart.html" class="btn btn-default">View Cart</a>
                      <a href="checkout.html" class="btn btn-primary">Checkout</a>
                    </div>
                  </div>
                </div>
                <!-- END CART CONTENT -->
            </div>
            <!-- END CART -->            <!-- BEGIN NAVIGATION -->
            <div class="collapse navbar-collapse mega-menu">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                      <a class="dropdown-toggle" data-toggle="dropdown" data-delay="0" data-close-others="false" data-target="product-list.html" href="product-list.html">
                        Woman 
                        <i class="fa fa-angle-down"></i>
                      </a>
                      <!-- BEGIN DROPDOWN MENU -->
                      <ul class="dropdown-menu" aria-labelledby="mega-menu">
                        <li>
                          <div class="nav-content">
                            <!-- BEGIN DROPDOWN MENU - COLUMN -->
                            <div class="nav-content-col">
                              <h3>Footwear</h3>
                              <ul>
                                <li><a href="product-list.html">Astro Trainers</a></li>
                                <li><a href="product-list.html">Basketball Shoes</a></li>
                                <li><a href="product-list.html">Boots</a></li>
                                <li><a href="product-list.html">Canvas Shoes</a></li>
                                <li><a href="product-list.html">Football Boots</a></li>
                                <li><a href="product-list.html">Golf Shoes</a></li>
                                <li><a href="product-list.html">Hi Tops</a></li>
                                <li><a href="product-list.html">Indoor and Court Trainers</a></li>
                              </ul>
                            </div>
                            <!-- END DROPDOWN MENU - COLUMN -->
                            <!-- BEGIN DROPDOWN MENU - COLUMN -->
                            <div class="nav-content-col">
                              <h3>Clothing</h3>
                              <ul>
                                <li><a href="product-list.html">Base Layer</a></li>
                                <li><a href="product-list.html">Character</a></li>
                                <li><a href="product-list.html">Chinos</a></li>
                                <li><a href="product-list.html">Combats</a></li>
                                <li><a href="product-list.html">Cricket Clothing</a></li>
                                <li><a href="product-list.html">Fleeces</a></li>
                                <li><a href="product-list.html">Gilets</a></li>
                                <li><a href="product-list.html">Golf Tops</a></li>
                              </ul>
                            </div>
                            <!-- END DROPDOWN MENU - COLUMN -->
                            <!-- BEGIN DROPDOWN MENU - COLUMN -->
                            <div class="nav-content-col">
                              <h3>Accessories</h3>
                              <ul>
                                <li><a href="product-list.html">Belts</a></li>
                                <li><a href="product-list.html">Caps</a></li>
                                <li><a href="product-list.html">Gloves, Hats and Scarves</a></li>
                              </ul>

                              <h3>Clearance</h3>
                              <ul>
                                <li><a href="product-list.html">Jackets</a></li>
                                <li><a href="product-list.html">Bottoms</a></li>
                              </ul>
                            </div>
                            <!-- END DROPDOWN MENU - COLUMN -->
                            <!-- BEGIN DROPDOWN MENU - BRANDS -->
                            <div class="nav-brands">
                              <ul>
                                <li><a href="product-list.html"><img title="esprit" alt="esprit" src="assets/temp/brands/esprit.jpg"></a></li>
                                <li><a href="product-list.html"><img title="gap" alt="gap" src="assets/temp/brands/gap.jpg"></a></li>
                                <li><a href="product-list.html"><img title="next" alt="next" src="assets/temp/brands/next.jpg"></a></li>
                                <li><a href="product-list.html"><img title="puma" alt="puma" src="assets/temp/brands/puma.jpg"></a></li>
                                <li><a href="product-list.html"><img title="zara" alt="zara" src="assets/temp/brands/zara.jpg"></a></li>
                              </ul>
                            </div>
                            <!-- END DROPDOWN MENU - BRANDS -->
                          </div>
                        </li>
                      </ul>
                      <!-- END DROPDOWN MENU -->
                    </li>
                    <li><a href="product-list.html">Men</a></li>
                    <li class="dropdown">
                      <a class="dropdown-toggle" data-toggle="dropdown" data-delay="0" data-close-others="false" data-target="product-list.html" href="product-list.html">
                        Kids
                        <i class="fa fa-angle-down"></i>
                      </a>
                      <!-- BEGIN DROPDOWN MENU -->
                      <ul class="dropdown-menu">
                        <li class="dropdown-submenu">
                          <a href="product-list.html">Hi Tops <i class="fa fa-angle-right"></i></a>
                          <ul class="dropdown-menu">
                            <li><a href="product-list.html">Second Level Link</a></li>
                            <li><a href="product-list.html">Second Level Link</a></li>
                            <li class="dropdown-submenu">
                              <a href="product-list.html">Second Level Link <i class="fa fa-angle-right"></i></a>
                              <ul class="dropdown-menu">
                                <li><a href="product-list.html">Third Level Link</a></li>
                                <li><a href="product-list.html">Third Level Link</a></li>
                                <li><a href="product-list.html">Third Level Link</a></li>
                              </ul>
                            </li>
                          </ul>
                        </li>
                        <li><a href="product-list.html">Running Shoes</a></li>
                        <li><a href="product-list.html">Jackets and Coats</a></li>
                        <li><a href="product-list.html">Tennis Clothing</a></li>
                        <li class="dropdown-submenu">
                          <a href="product-list.html">Running Clothing <i class="fa fa-angle-right"></i></a>
                          <ul class="dropdown-menu">
                            <li><a href="product-list.html">Second Level Link</a></li>
                            <li><a href="product-list.html">Second Level Link</a></li>
                            <li class="dropdown-submenu">
                              <a href="product-list.html">Second Level Link <i class="fa fa-angle-right"></i></a>
                              <ul class="dropdown-menu">
                                <li><a href="product-list.html">Third Level Link</a></li>
                                <li><a href="product-list.html">Third Level Link</a></li>
                                <li><a href="product-list.html">Third Level Link</a></li>
                              </ul>
                            </li>
                          </ul>
                        </li>
                      </ul>
                      <!-- END DROPDOWN MENU -->
                    </li>
                    <li class="dropdown">
                      <a class="dropdown-toggle" data-toggle="dropdown" data-delay="0" data-close-others="false" data-target="product-list.html" href="product-list.html">
                        New 
                        <i class="fa fa-angle-down"></i>
                      </a>
                      <!-- BEGIN DROPDOWN MENU -->
                      <ul class="dropdown-menu" aria-labelledby="mega-menu-catalogue">
                        <li>
                          <div class="nav-content">
                            <div class="product-item">
                              <div class="pi-img-wrapper">
                                <a href="item.html"><img src="assets/temp/products/model4.jpg" class="img-responsive" alt="Berry Lace Dress"></a>
                              </div>
                              <h3><a href="item.html">Berry Lace Dress</a></h3>
                              <div class="pi-price">$29.00</div>
                              <a href="#" class="btn btn-default add2cart">Add to cart</a>
                            </div>
                            <div class="product-item">
                              <div class="pi-img-wrapper">
                                <a href="item.html"><img src="assets/temp/products/model3.jpg" class="img-responsive" alt="Berry Lace Dress"></a>
                              </div>
                              <h3><a href="item.html">Berry Lace Dress</a></h3>
                              <div class="pi-price">$29.00</div>
                              <a href="#" class="btn btn-default add2cart">Add to cart</a>
                            </div>
                            <div class="product-item">
                              <div class="pi-img-wrapper">
                                <a href="item.html"><img src="assets/temp/products/model7.jpg" class="img-responsive" alt="Berry Lace Dress"></a>
                              </div>
                              <h3><a href="item.html">Berry Lace Dress</a></h3>
                              <div class="pi-price">$29.00</div>
                              <a href="#" class="btn btn-default add2cart">Add to cart</a>
                            </div>
                          </div>
                        </li>
                      </ul>
                      <!-- END DROPDOWN MENU -->
                    </li>
                    <li class="dropdown">
                      <a class="dropdown-toggle" data-toggle="dropdown" data-delay="0" data-close-others="false" data-target="#" href="#">
                        Pages
                        <i class="fa fa-angle-down"></i>
                      </a>
                      <!-- BEGIN DROPDOWN MENU -->
                      <ul class="dropdown-menu">
                        <li><a href="index-light-footer.html">Light Footer</a></li>
                        <li><a href="product-list.html">Product List</a></li>
                        <li><a href="search-result.html">Search Result</a></li>
                        <li><a href="item.html">Product Page</a></li>
                        <li><a href="shopping-cart-null.html">Shopping Cart (Null Cart)</a></li>
                        <li><a href="shopping-cart.html">Shopping Cart</a></li>
                        <li><a href="checkout.html">Checkout</a></li>
                        <li><a href="reg-page.html">Registration Page</a></li>
                        <li><a href="login-page.html">Login Page</a></li>
                        <li><a href="forgotton-password.html">Forget Password</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="contacts.html">Contacts</a></li>
                        <li><a href="faq.html">FAQ</a></li>
                        <li><a href="privacy-policy.html">Privacy Policy</a></li>
                        <li><a href="terms-conditions-page.html">Terms & Conditions</a></li>
                        <li><a href="site-map.html">Site Map</a></li>
                        <li><a href="page-404.html">404</a></li>
                        <li><a href="page-500.html">500</a></li> 
                      </ul>
                      <!-- END DROPDOWN MENU -->
                    </li>
                    <li class="dropdown active">
                      <a class="dropdown-toggle" data-toggle="dropdown" data-delay="0" data-close-others="false" data-target="#" href="#">
                        Features
                        <i class="fa fa-angle-down"></i>
                      </a>
                      <!-- BEGIN DROPDOWN MENU -->
                      <ul class="dropdown-menu">
                        <li><a href="feature-typography.html">Typography</a></li>
                        <li><a href="feature-forms.html">Forms</a></li>
                        <li class="active"><a href="feature-buttons.html">Buttons</a></li>
                        <li><a href="feature-icons.html">Icons</a></li>
                      </ul>
                      <!-- END DROPDOWN MENU -->
                    </li>
                    <li><a href="http://keenthemes.com/preview/metronic_admin/ecommerce_index.html">Admin theme</a></li>
                    <!-- BEGIN TOP SEARCH -->
                    <li class="menu-search">
                        <span class="sep"></span>
                        <i class="fa fa-search search-btn"></i>
                        <div class="search-box">
                            <form action="#">
                                <div class="input-group">
                                    <input type="text" placeholder="Search" class="form-control">
                                    <span class="input-group-btn">
                                        <button class="btn btn-primary" type="submit">Search</button>
                                    </span>
                                </div>
                            </form>
                        </div> 
                    </li>
                    <!-- END TOP SEARCH -->
                </ul>
            </div>
            <!-- END NAVIGATION -->
        </div>
    </div>
    <!-- END HEADER -->

    <div class="main">
      <div class="container">
        <ul class="breadcrumb">
            <li><a href="index.html">Home</a></li>
            <li><a href="">Store</a></li>
            <li class="active">Buttons</li>
        </ul>
        <!-- BEGIN SIDEBAR & CONTENT -->
        <div class="row margin-bottom-40">
          <!-- BEGIN CONTENT -->
          <div class="col-md-12 col-sm-12">
            <h1>Buttons</h1>
            <div class="content-page">

              <!-- TWO COLUMNS -->
              <div class="row margin-bottom-40 buttons-page">
                <!-- FIRST COLUMN -->
                <div class="col-md-6 col-sm-6">         
                  <!-- BUTTONS -->
                    <h3>Buttons</h3>
                                <div class="clearfix">
                                    <h4 class="block">Default Bootstrap Buttons(Customized to Match Theme Style)</h4>
                                    <!-- Standard gray button with gradient -->
                                    <button type="button" class="btn btn-default">Default</button>
                                    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                                    <button type="button" class="btn btn-primary">Primary</button>
                                    <!-- Indicates a successful or positive action -->
                                    <button type="button" class="btn btn-success">Success</button>
                                    <!-- Contextual button for informational alert messages -->
                                    <button type="button" class="btn btn-info">Info</button>
                                    <!-- Indicates caution should be taken with this action -->
                                    <button type="button" class="btn btn-warning">Warning</button>
                                    <!-- Indicates a dangerous or potentially negative action -->
                                    <button type="button" class="btn btn-danger">Danger</button>
                                    <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
                                    <button type="button" class="btn btn-link">Link</button>
                                </div>
                                <div class="clearfix">
                                    <h4 class="block">Metronic Style Buttons</h4>
                                    <button type="button" class="btn default">Default</button>
                                    <button type="button" class="btn red">Red</button>
                                    <button type="button" class="btn blue">Blue</button>           
                                    <button type="button" class="btn green">Green</button>
                                    <button type="button" class="btn yellow">Yellow</button>
                                    <button type="button" class="btn purple">Purple</button>
                                    <button type="button" class="btn dark">Dark</button>
                                </div>
                                <div class="clearfix">
                                    <h4 class="block">Button Stripe</h4>
                                    <a href="#" class="btn default red-stripe">Red</a>
                                    <a href="#" class="btn default blue-stripe">Blue</a>           
                                    <a href="#" class="btn default green-stripe">Green</a>
                                    <a href="#" class="btn default yellow-stripe">Yellow</a>
                                    <a href="#" class="btn default purple-stripe">Purple</a>
                                    <a href="#" class="btn default green-stripe">Green</a>
                                    <a href="#" class="btn default dark-stripe">Dark</a>
                                </div>
                                <div class="clearfix">
                                    <h4 class="block">Disabled</h4>
                                    <a href="#" class="btn default disabled">Default</a>
                                    <a href="#" class="btn red disabled">Red</a>
                                    <a href="#" class="btn blue disabled">Blue</a>           
                                    <a href="#" class="btn green disabled">Green</a>
                                    <a href="#" class="btn yellow disabled">Yellow</a>
                                    <a href="#" class="btn purple disabled">Purple</a>
                                    <a href="#" class="btn dark disabled">Dark</a>
                                </div>
                                <div class="clearfix">
                                    <h4 class="block">Button Sizes</h4>
                                    <button type="button" class="btn default btn-lg">Large button</button>
                                    <button type="button" class="btn red">Default button</button>
                                    <button type="button" class="btn blue btn-sm">Small button</button>           
                                    <button type="button" class="btn green btn-xs">Extra small button</button>
                                </div>
                                <div class="clearfix">
                                    <h4 class="block">Button Tags</h4>
                                    <a href="#" class="btn default">Link</a>
                                    <button class="btn default">Button</button>
                                    <input class="btn default" value="Input" type="button">
                                    <input class="btn default" value="Submit" type="submit">
                                </div>
                                <div class="clearfix">
                                    <h4 class="block">Block Buttons</h4>
                                    <a href="#" class="btn default btn-block">Link</a>
                                    <button class="btn blue btn-block">Button</button>
                                    <input class="btn red btn-block" value="Input" type="button">
                                    <input class="btn purple btn-block" value="Submit" type="submit">
                                </div>

                                <h3>Icon Buttons</h3>
                                <div class="tabbable portlet-tabs">
                                    <ul class="nav nav-tabs">
                                        <li class="active">
                                            <a href="#dropdown_fontawesome" data-toggle="tab">Fontawesome</a>
                                        </li>
                                        <li class="">
                                            <a href="#dropdown_glyphicon" data-toggle="tab">Glyphicon</a>
                                        </li>
                                        <li class="">
                                            <a href="#buttons_metro" data-toggle="tab">Metro</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="dropdown_fontawesome">
                                            <div class="clearfix">
                                                <h4 class="block">Large Buttons with Font Awesome Icons</h4>
                                                <a href="#" class="btn btn-lg default">Default <i class="fa fa-user"></i></a>
                                                <a href="#" class="btn btn-lg red">Red <i class="fa fa-edit"></i></a>
                                                <a href="#" class="btn btn-lg blue"><i class="fa fa-file-o"></i> Blue</a>           
                                                <a href="#" class="btn btn-lg green">Green <i class="fa fa-font"></i></a>
                                                <a href="#" class="btn btn-lg yellow">Yellow <i class="fa fa-search"></i></a>
                                                <a href="#" class="btn btn-lg purple"><i class="fa fa-times"></i> Purple</a>
                                                <a href="#" class="btn btn-lg green">Green <i class="fa fa-plus"></i></a>
                                                <a href="#" class="btn btn-lg dark">Dark <i class="fa fa-link"></i></a>
                                            </div>
                                            <div class="clearfix">
                                                <h4 class="block">Default Buttons with Font Awesome Icons</h4>
                                                <a href="#" class="btn default">Default <i class="fa fa-user"></i></a>
                                                <a href="#" class="btn red">Red <i class="fa fa-edit"></i></a>
                                                <a href="#" class="btn blue"><i class="fa fa-file-o"></i> Blue</a>           
                                                <a href="#" class="btn green">Green <i class="fa fa-font"></i></a>
                                                <a href="#" class="btn yellow">Yellow <i class="fa fa-search"></i></a>
                                                <a href="#" class="btn purple"><i class="fa fa-times"></i> Purple</a>
                                                <a href="#" class="btn green">Green <i class="fa fa-plus"></i></a>
                                                <a href="#" class="btn dark">Dark <i class="fa fa-link"></i></a>
                                            </div>
                                            <div class="clearfix">
                                                <h4 class="block">Small Buttons with Font Awesome Icons</h4>
                                                <a href="#" class="btn btn-sm default">Default <i class="fa fa-user"></i></a>
                                                <a href="#" class="btn btn-sm red">Red <i class="fa fa-edit"></i></a>
                                                <a href="#" class="btn btn-sm blue"><i class="fa fa-file-o"></i> Blue</a>           
                                                <a href="#" class="btn btn-sm green">Green <i class="fa fa-font"></i></a>
                                                <a href="#" class="btn btn-sm yellow">Yellow <i class="fa fa-search"></i></a>
                                                <a href="#" class="btn btn-sm purple"><i class="fa fa-times"></i> Purple</a>
                                                <a href="#" class="btn btn-sm green">Green <i class="fa fa-plus"></i></a>
                                                <a href="#" class="btn btn-sm dark">Dark <i class="fa fa-link"></i></a>
                                            </div>
                                            <div class="clearfix">
                                                <h4 class="block">Extra Small Buttons with Font Awesome Icons</h4>
                                                <a href="#" class="btn btn-xs default">Default <i class="fa fa-user"></i></a>
                                                <a href="#" class="btn btn-xs red">Red <i class="fa fa-edit"></i></a>
                                                <a href="#" class="btn btn-xs blue"><i class="fa fa-file-o"></i> Blue</a>           
                                                <a href="#" class="btn btn-xs green">Green <i class="fa fa-font"></i></a>
                                                <a href="#" class="btn btn-xs yellow">Yellow <i class="fa fa-search"></i></a>
                                                <a href="#" class="btn btn-xs purple"><i class="fa fa-times"></i> Purple</a>
                                                <a href="#" class="btn btn-xs green">Green <i class="fa fa-plus"></i></a>
                                                <a href="#" class="btn btn-xs dark">Dark <i class="fa fa-link"></i></a>
                                            </div>
                                            <div class="clearfix">
                                                <h4 class="block">Font Awesome Icon Only Buttons</h4>
                                                <a href="#" class="btn default"><i class="fa fa-user"></i></a>
                                                <a href="#" class="btn red"><i class="fa fa-edit"></i></a>
                                                <a href="#" class="btn blue"><i class="fa fa-file-o"></i></a>           
                                                <a href="#" class="btn green"><i class="fa fa-font"></i></a>
                                                <a href="#" class="btn yellow"><i class="fa fa-search"></i></a>
                                                <a href="#" class="btn purple"><i class="fa fa-times"></i></a>
                                                <a href="#" class="btn green"><i class="fa fa-plus"></i></a>
                                                <a href="#" class="btn dark"><i class="fa fa-link"></i></a>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="dropdown_glyphicon">
                                            <div class="clearfix">
                                                <h4 class="block">Large Buttons with Font Awesome Icons</h4>
                                                <a href="#" class="btn btn-lg default">Default <span class="glyphicon glyphicon-cog"></span></a>
                                                <a href="#" class="btn btn-lg red">Red <span class="glyphicon glyphicon-calendar"></span></a>
                                                <a href="#" class="btn btn-lg blue"><span class="glyphicon glyphicon-font"></span> Blue</a>           
                                                <a href="#" class="btn btn-lg green">Green <span class="glyphicon glyphicon-gift"></span></a>
                                                <a href="#" class="btn btn-lg yellow">Yellow <span class="glyphicon glyphicon-pencil"></span></a>
                                                <a href="#" class="btn btn-lg purple"><span class="glyphicon glyphicon-tag"></span> Purple</a>
                                                <a href="#" class="btn btn-lg green">Green <span class="glyphicon glyphicon-user"></span></a>
                                                <a href="#" class="btn btn-lg dark">Dark <span class="glyphicon glyphicon-link"></span></a>
                                            </div>
                                            <div class="clearfix">
                                                <h4 class="block">Default Buttons with Font Awesome Icons</h4>
                                                <a href="#" class="btn default">Default <span class="glyphicon glyphicon-cog"></span></a>
                                                <a href="#" class="btn red">Red <span class="glyphicon glyphicon-calendar"></span></a>
                                                <a href="#" class="btn blue"><span class="glyphicon glyphicon-font"></span> Blue</a>           
                                                <a href="#" class="btn green">Green <span class="glyphicon glyphicon-gift"></span></a>
                                                <a href="#" class="btn yellow">Yellow <span class="glyphicon glyphicon-pencil"></span></a>
                                                <a href="#" class="btn purple"><span class="glyphicon glyphicon-tag"></span> Purple</a>
                                                <a href="#" class="btn green">Green <span class="glyphicon glyphicon-user"></span></a>
                                                <a href="#" class="btn dark">Dark <span class="glyphicon glyphicon-link"></span></a>
                                            </div>
                                            <div class="clearfix">
                                                <h4 class="block">Small Buttons with Font Awesome Icons</h4>
                                                <a href="#" class="btn btn-sm default">Default <span class="glyphicon glyphicon-cog"></span></a>
                                                <a href="#" class="btn btn-sm red">Red <span class="glyphicon glyphicon-calendar"></span></a>
                                                <a href="#" class="btn btn-sm blue"><span class="glyphicon glyphicon-font"></span> Blue</a>           
                                                <a href="#" class="btn btn-sm green">Green <span class="glyphicon glyphicon-gift"></span></a>
                                                <a href="#" class="btn btn-sm yellow">Yellow <span class="glyphicon glyphicon-pencil"></span></a>
                                                <a href="#" class="btn btn-sm purple"><span class="glyphicon glyphicon-tag"></span> Purple</a>
                                                <a href="#" class="btn btn-sm green">Green <span class="glyphicon glyphicon-user"></span></a>
                                                <a href="#" class="btn btn-sm dark">Dark <span class="glyphicon glyphicon-link"></span></a>
                                            </div>
                                            <div class="clearfix">
                                                <h4 class="block">Extra Small Buttons with Font Awesome Icons</h4>
                                                <a href="#" class="btn btn-xs default">Default <span class="glyphicon glyphicon-cog"></span></a>
                                                <a href="#" class="btn btn-xs red">Red <span class="glyphicon glyphicon-calendar"></span></a>
                                                <a href="#" class="btn btn-xs blue"><span class="glyphicon glyphicon-font"></span> Blue</a>           
                                                <a href="#" class="btn btn-xs green">Green <span class="glyphicon glyphicon-gift"></span></a>
                                                <a href="#" class="btn btn-xs yellow">Yellow <span class="glyphicon glyphicon-pencil"></span></a>
                                                <a href="#" class="btn btn-xs purple"><span class="glyphicon glyphicon-tag"></span> Purple</a>
                                                <a href="#" class="btn btn-xs green">Green <span class="glyphicon glyphicon-user"></span></a>
                                                <a href="#" class="btn btn-xs dark">Dark <span class="glyphicon glyphicon-link"></span></a>
                                            </div>
                                            <div class="clearfix">
                                                <h4 class="block">Font Awesome Icon Only Buttons</h4>
                                                <a href="#" class="btn default"><span class="glyphicon glyphicon-cog"></span></a>
                                                <a href="#" class="btn red"><span class="glyphicon glyphicon-calendar"></span></a>
                                                <a href="#" class="btn blue"><span class="glyphicon glyphicon-font"></span></a>           
                                                <a href="#" class="btn green"><span class="glyphicon glyphicon-gift"></span></a>
                                                <a href="#" class="btn yellow"><span class="glyphicon glyphicon-pencil"></span></a>
                                                <a href="#" class="btn purple"><span class="glyphicon glyphicon-tag"></span></a>
                                                <a href="#" class="btn green"><span class="glyphicon glyphicon-user"></span></a>
                                                <a href="#" class="btn dark"><span class="glyphicon glyphicon-link"></span></a>
                                            </div>
                                        </div>
                                        <div class="tab-pane " id="buttons_metro">
                                            <div class="clearfix">
                                                <h4 class="block">Navigation Large Icons Buttons</h4>
                                                <a href="#" class="btn btn-lg default m-icon-big">Submit <i class="m-icon-big-swapleft"></i></a>
                                                <a href="#" class="btn btn-lg green m-icon-big">Submit <i class="m-icon-big-swapright m-icon-white"></i></a>
                                                <a href="#" class="btn btn-lg blue m-icon-big">Submit <i class="m-icon-big-swapdown m-icon-white"></i></a>
                                                <a href="#" class="btn btn-lg dark m-icon-big">Submit <i class="m-icon-big-swapup m-icon-white"></i></a>
                                            </div>
                                            <div class="clearfix">
                                                <h4 class="block">Navigation Large Icons Only Buttons</h4>
                                                <a href="#" class="btn btn-lg default m-icon-big m-icon-only"><i class="m-icon-big-swapleft"></i></a>
                                                <a href="#" class="btn btn-lg green m-icon-big m-icon-only"><i class="m-icon-big-swapright m-icon-white"></i></a>
                                                <a href="#" class="btn btn-lg blue m-icon-big m-icon-only"><i class="m-icon-big-swapdown m-icon-white"></i></a>
                                                <a href="#" class="btn btn-lg dark m-icon-big m-icon-only"><i class="m-icon-big-swapup m-icon-white"></i></a>
                                            </div>
                                            <div class="clearfix">
                                                <h4 class="block">Navigation Block Large Icons</h4>
                                                <button class="btn blue btn-block btn-lg m-icon-big">Button <i class="m-icon-big-swapright m-icon-white"></i></button>
                                                <a href="#" class="btn green btn-block btn-lg m-icon-big">Link <i class="m-icon-big-swapright m-icon-white"></i></a>
                                            </div>
                                            <div class="clearfix">
                                                <h4 class="block">Navigation Defualt Icons Buttons</h4>
                                                <a href="#" class="btn default m-icon">Submit <i class="m-icon-swapleft"></i></a>
                                                <a href="#" class="btn green m-icon">Submit <i class="m-icon-swapright m-icon-white"></i></a>
                                                <a href="#" class="btn blue m-icon">Submit <i class="m-icon-swapdown m-icon-white"></i></a>
                                                <a href="#" class="btn dark m-icon">Submit <i class="m-icon-swapup m-icon-white"></i></a>
                                            </div>
                                            <div class="clearfix">
                                                <h4 class="block">Navigation Defualt Icons Only Buttons</h4>
                                                <a href="#" class="btn default m-icon m-icon-only"><i class="m-icon-swapleft"></i></a>
                                                <a href="#" class="btn green m-icon m-icon-only"><i class="m-icon-swapright m-icon-white"></i></a>
                                                <a href="#" class="btn blue m-icon m-icon-only"><i class="m-icon-swapdown m-icon-white"></i></a>
                                                <a href="#" class="btn dark m-icon m-icon-only"><i class="m-icon-swapup m-icon-white"></i></a>
                                            </div>
                                            <div class="clearfix">
                                                <h4 class="block">Navigation Block Defualt Icons</h4>
                                                <button class="btn blue btn-block m-icon">Button <i class="m-icon-swapright m-icon-white"></i></button>
                                                <a href="#" class="btn green btn-block m-icon">Link <i class="m-icon-swapright m-icon-white"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <h3>Font Awesome Styled Buttons</h3>
                                <a href="#" class="icon-btn">
                                    <i class="fa fa-group"></i>
                                    <div>Users</div>
                                    <span class="badge badge-important">2</span>
                                </a>
                                <a href="#" class="icon-btn">
                                    <i class="fa fa-barcode"></i>
                                    <div>Products</div>
                                    <span class="badge badge-success">4</span>
                                </a>
                                <a href="#" class="icon-btn">
                                    <i class="fa fa-bar-chart-o"></i>
                                    <div>Reports</div>
                                </a>
                                <a href="#" class="icon-btn">
                                    <i class="fa fa-sitemap"></i>
                                    <div>Categories</div>
                                </a>
                                <a href="#" class="icon-btn">
                                    <i class="fa fa-calendar"></i>
                                    <div>Calendar</div>
                                    <span class="badge badge-success">4</span>
                                </a>
                                <a href="#" class="icon-btn">
                                    <i class="fa fa-envelope"></i>
                                    <div>Inbox</div>
                                    <span class="badge badge-info">12</span>
                                </a>
                                <a href="#" class="icon-btn">
                                    <i class="fa fa-bullhorn"></i>
                                    <div>Notification</div>
                                    <span class="badge badge-important">3</span>
                                </a>
                                <a href="#" class="icon-btn">
                                    <i class="fa fa-map-marker"></i>
                                    <div>Locations</div>
                                </a>
                                <a href="#" class="icon-btn">
                                    <i class="fa fa-money"><i></i></i>
                                    <div>Finance</div>
                                </a>
                                <a href="#" class="icon-btn">
                                    <i class="fa fa-plane"></i>
                                    <div>Projects</div>
                                    <span class="badge badge-info">21</span>
                                </a>
                                <a href="#" class="icon-btn">
                                    <i class="fa fa-thumbs-up"></i>
                                    <div>Feedback</div>
                                    <span class="badge badge-info">2</span>
                                </a>
                                <a href="#" class="icon-btn">
                                    <i class="fa fa-cloud"></i>
                                    <div>Servers</div>
                                    <span class="badge badge-important">2</span>
                                </a>
                                <a href="#" class="icon-btn">
                                    <i class="fa fa-globe"></i>
                                    <div>Regions</div>
                                </a>
                                <a href="#" class="icon-btn">
                                    <i class="fa fa-heart-o"></i>
                                    <div>Popularity</div>
                                    <span class="badge badge-info">221</span>
                                </a>

                                <h3>Social Icons</h3>
                                <ul class="social-icons">
                                    <li><a href="#" data-original-title="amazon" class="amazon"></a></li>
                                    <li><a href="#" data-original-title="behance" class="behance"></a></li>
                                    <li><a href="#" data-original-title="blogger" class="blogger"></a></li>
                                    <li><a href="#" data-original-title="deviantart" class="deviantart"></a></li>
                                    <li><a href="#" data-original-title="dribbble" class="dribbble"></a></li>
                                    <li><a href="#" data-original-title="dropbox" class="dropbox"></a></li>
                                    <li><a href="#" data-original-title="facebook" class="facebook"></a></li>
                                    <li><a href="#" data-original-title="forrst" class="forrst"></a></li>
                                    <li><a href="#" data-original-title="github" class="github"></a></li>
                                    <li><a href="#" data-original-title="Goole Plus" class="googleplus"></a></li>
                                    <li><a href="#" data-original-title="jolicloud" class="jolicloud"></a></li>
                                    <li><a href="#" data-original-title="last-fm" class="last-fm"></a></li>
                                    <li><a href="#" data-original-title="linkedin" class="linkedin"></a></li>
                                    <li><a href="#" data-original-title="picasa" class="picasa"></a></li>
                                    <li><a href="#" data-original-title="pintrest" class="pintrest"></a></li>
                                    <li><a href="#" data-original-title="rss" class="rss"></a></li>
                                    <li><a href="#" data-original-title="skype" class="skype"></a></li>
                                    <li><a href="#" data-original-title="spotify" class="spotify"></a></li>
                                    <li><a href="#" data-original-title="stumbleupon" class="stumbleupon"></a></li>
                                    <li><a href="#" data-original-title="tumblr" class="tumblr"></a></li>
                                    <li><a href="#" data-original-title="twitter" class="twitter"></a></li>
                                    <li><a href="#" data-original-title="vimeo" class="vimeo"></a></li>
                                    <li><a href="#" data-original-title="wordpress" class="wordpress"></a></li>
                                    <li><a href="#" data-original-title="xing" class="xing"></a></li>
                                    <li><a href="#" data-original-title="yahoo" class="yahoo"></a></li>
                                    <li><a href="#" data-original-title="youtube" class="youtube"></a></li>
                                    <li><a href="#" data-original-title="vk" class="vk"></a></li>
                                    <li><a href="#" data-original-title="instagram" class="instagram"></a></li>
                                    <li><a href="#" data-original-title="flickr" class="flickr" ></a></li>
                                    <li><a href="#" data-original-title="foursquare" class="foursquare"></a></li>
                                    <li><a href="#" data-original-title="gravatar" class="gravatar"></a></li>
                                    <li><a href="#" data-original-title="klout" class="klout"></a></li>
                                    <li><a href="#" data-original-title="myspace" class="myspace"></a></li>
                                    <li><a href="#" data-original-title="quora" class="quora"></a></li>
                                </ul>

                                <h3>Social Icons (Colored)</h3>
                                <ul class="social-icons  social-icons-color">
                                    <li><a href="#" data-original-title="amazon" class="amazon"></a></li>
                                    <li><a href="#" data-original-title="behance" class="behance"></a></li>
                                    <li><a href="#" data-original-title="blogger" class="blogger"></a></li>
                                    <li><a href="#" data-original-title="deviantart" class="deviantart"></a></li>
                                    <li><a href="#" data-original-title="dribbble" class="dribbble"></a></li>
                                    <li><a href="#" data-original-title="dropbox" class="dropbox"></a></li>
                                    <li><a href="#" data-original-title="facebook" class="facebook"></a></li>
                                    <li><a href="#" data-original-title="forrst" class="forrst"></a></li>
                                    <li><a href="#" data-original-title="github" class="github"></a></li>
                                    <li><a href="#" data-original-title="Goole Plus" class="googleplus"></a></li>
                                    <li><a href="#" data-original-title="jolicloud" class="jolicloud"></a></li>
                                    <li><a href="#" data-original-title="last-fm" class="last-fm"></a></li>
                                    <li><a href="#" data-original-title="linkedin" class="linkedin"></a></li>
                                    <li><a href="#" data-original-title="picasa" class="picasa"></a></li>
                                    <li><a href="#" data-original-title="pintrest" class="pintrest"></a></li>
                                    <li><a href="#" data-original-title="rss" class="rss"></a></li>
                                    <li><a href="#" data-original-title="skype" class="skype"></a></li>
                                    <li><a href="#" data-original-title="spotify" class="spotify"></a></li>
                                    <li><a href="#" data-original-title="stumbleupon" class="stumbleupon"></a></li>
                                    <li><a href="#" data-original-title="tumblr" class="tumblr"></a></li>
                                    <li><a href="#" data-original-title="twitter" class="twitter"></a></li>
                                    <li><a href="#" data-original-title="vimeo" class="vimeo"></a></li>
                                    <li><a href="#" data-original-title="wordpress" class="wordpress"></a></li>
                                    <li><a href="#" data-original-title="xing" class="xing"></a></li>
                                    <li><a href="#" data-original-title="yahoo" class="yahoo"></a></li>
                                    <li><a href="#" data-original-title="youtube" class="youtube"></a></li>
                                    <li><a href="#" data-original-title="vk" class="vk"></a></li>
                                    <li><a href="#" data-original-title="instagram" class="instagram"></a></li>
                                    <li><a href="#" data-original-title="flickr" class="flickr" ></a></li>
                                    <li><a href="#" data-original-title="foursquare" class="foursquare"></a></li>
                                    <li><a href="#" data-original-title="gravatar" class="gravatar"></a></li>
                                    <li><a href="#" data-original-title="klout" class="klout"></a></li>
                                    <li><a href="#" data-original-title="myspace" class="myspace"></a></li>
                                    <li><a href="#" data-original-title="quora" class="quora"></a></li>
                                </ul>         
                </div>
                <!-- END FIRST COLUMN -->

                <!-- SECOND COLUMN -->
                <div class="col-md-6 col-sm-6">       
                    <h3>Button Groups</h3>
                                <div class="clearfix">
                                    <h4 class="block">Basic Example</h4>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default">Left</button>
                                        <button type="button" class="btn btn-default">Middle</button>
                                        <button type="button" class="btn btn-default">Right</button>
                                    </div>
                                    <div class="btn-group btn-group-solid">
                                        <button type="button" class="btn red">Left</button>
                                        <button type="button" class="btn yellow">Middle</button>
                                        <button type="button" class="btn green">Right</button>
                                    </div>
                                </div>
                                <div class="clearfix">
                                    <h4 class="block">Button Toolbar</h4>
                                    <div class="btn-toolbar margin-bottom-10">
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-default">1</button>
                                            <button type="button" class="btn btn-default">2</button>
                                            <button type="button" class="btn btn-default">3</button>
                                            <button type="button" class="btn btn-default">4</button>
                                        </div>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-default">5</button>
                                            <button type="button" class="btn btn-default">6</button>
                                            <button type="button" class="btn btn-default">7</button>
                                        </div>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-default">8</button>
                                        </div>
                                    </div>
                                    <div class="btn-toolbar">
                                        <div class="btn-group btn-group-solid">
                                            <button type="button" class="btn red">1</button>
                                            <button type="button" class="btn green">2</button>
                                            <button type="button" class="btn blue">3</button>
                                            <button type="button" class="btn yellow">4</button>
                                        </div>
                                        <div class="btn-group btn-group-solid">
                                            <button type="button" class="btn purple">5</button>
                                            <button type="button" class="btn dark">6</button>
                                            <button type="button" class="btn default">7</button>
                                        </div>
                                        <div class="btn-group btn-group-solid">
                                            <button type="button" class="btn red">8</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="clearfix">
                                    <h4 class="block">Button Group Sizing</h4>
                                    <div class="btn-toolbar">
                                        <div class="btn-group btn-group-lg btn-group-solid margin-bottom-10">
                                            <button type="button" class="btn red">Left</button>
                                            <button type="button" class="btn green">Middle</button>
                                            <button type="button" class="btn blue">Right</button>
                                        </div>
                                    </div>
                                    <div class="btn-toolbar margin-bottom-10">
                                        <div class="btn-group btn-group-solid">
                                            <button type="button" class="btn red">Left</button>
                                            <button type="button" class="btn green">Middle</button>
                                            <button type="button" class="btn blue">Right</button>
                                        </div>
                                    </div>
                                    <div class="btn-toolbar margin-bottom-10">
                                        <div class="btn-group btn-group-sm btn-group-solid">
                                            <button type="button" class="btn red">Left</button>
                                            <button type="button" class="btn green">Middle</button>
                                            <button type="button" class="btn blue">Right</button>
                                        </div>
                                    </div>
                                    <div class="btn-toolbar margin-bottom-10">
                                        <div class="btn-group btn-group-xs btn-group-solid">
                                            <button type="button" class="btn red">Left</button>
                                            <button type="button" class="btn green">Middle</button>
                                            <button type="button" class="btn blue">Right</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="clearfix">
                                    <h4 class="block">Nesting Button Group</h4>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default"><i class="fa fa-user"></i> Profile</button>
                                        <button type="button" class="btn btn-default"><i class="fa fa-cogs"></i> Settings</button>
                                        <button type="button" class="btn btn-default"><i class="fa fa-bullhorn"></i> Feeds</button>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                            <i class="fa fa-ellipsis-horizontal"></i> More
                                            <i class="fa fa-angle-down"></i>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">Dropdown link</a></li>
                                                <li><a href="#">Dropdown link</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="clearfix margin-bottom-10"></div>
                                    <div class="btn-group btn-group-solid">
                                        <button type="button" class="btn red"><i class="fa fa-user"></i> Profile</button>
                                        <button type="button" class="btn green"><i class="fa fa-cogs"></i> Settings</button>
                                        <button type="button" class="btn purple"><i class="fa fa-bullhorn"></i> Feeds</button>
                                        <div class="btn-group btn-group-solid">
                                            <button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown">
                                            <i class="fa fa-ellipsis-horizontal"></i> More
                                            <i class="fa fa-angle-down"></i>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">Dropdown link</a></li>
                                                <li><a href="#">Dropdown link</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="clearfix">
                                    <h4 class="block">Vertical variation</h4>
                                    <div class="btn-group-vertical margin-right-10">
                                        <button type="button" class="btn btn-default">Button</button>
                                        <button type="button" class="btn btn-default">Button</button>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                            Dropdown
                                            <i class="fa fa-angle-down"></i>
                                            </button>
                                            <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
                                                <li><a href="#">Dropdown link</a></li>
                                                <li><a href="#">Dropdown link</a></li>
                                            </ul>
                                        </div>
                                        <button type="button" class="btn btn-default">Button</button>
                                        <button type="button" class="btn btn-default">Button</button>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                            Dropdown
                                            <i class="fa fa-angle-down"></i>
                                            </button>
                                            <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
                                                <li><a href="#">Dropdown link</a></li>
                                                <li><a href="#">Dropdown link</a></li>
                                            </ul>
                                        </div>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                            Dropdown
                                            <i class="fa fa-angle-down"></i>
                                            </button>
                                            <ul class="dropdown-menu" role="menu">
                                                <li><a href="#">Dropdown link</a></li>
                                                <li><a href="#">Dropdown link</a></li>
                                            </ul>
                                        </div>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                            Dropdown
                                            <i class="fa fa-angle-down"></i>
                                            </button>
                                            <ul class="dropdown-menu" role="menu">
                                                <li><a href="#">Dropdown link</a></li>
                                                <li><a href="#">Dropdown link</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="btn-group-vertical btn-group-solid">
                                        <button type="button" class="btn blue">Button</button>
                                        <button type="button" class="btn green">Button</button>
                                        <div class="btn-group">
                                            <button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">
                                            Dropdown
                                            <i class="fa fa-angle-down"></i>
                                            </button>
                                            <ul class="dropdown-menu" role="menu">
                                                <li><a href="#">Dropdown link</a></li>
                                                <li><a href="#">Dropdown link</a></li>
                                            </ul>
                                        </div>
                                        <button type="button" class="btn red">Button</button>
                                        <button type="button" class="btn dark">Button</button>
                                        <div class="btn-group">
                                            <button type="button" class="btn default dropdown-toggle" data-toggle="dropdown">
                                            Dropdown
                                            <i class="fa fa-angle-down"></i>
                                            </button>
                                            <ul class="dropdown-menu" role="menu">
                                                <li><a href="#">Dropdown link</a></li>
                                                <li><a href="#">Dropdown link</a></li>
                                            </ul>
                                        </div>
                                        <div class="btn-group">
                                            <button type="button" class="btn purple dropdown-toggle" data-toggle="dropdown">
                                            Dropdown
                                            <i class="fa fa-angle-down"></i>
                                            </button>
                                            <ul class="dropdown-menu" role="menu">
                                                <li><a href="#">Dropdown link</a></li>
                                                <li><a href="#">Dropdown link</a></li>
                                            </ul>
                                        </div>
                                        <div class="btn-group">
                                            <button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">
                                            Dropdown
                                            <i class="fa fa-angle-down"></i>
                                            </button>
                                            <ul class="dropdown-menu" role="menu">
                                                <li><a href="#">Dropdown link</a></li>
                                                <li><a href="#">Dropdown link</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="clearfix">
                                    <h4 class="block">Justified Link Variation</h4>
                                    <div class="btn-group btn-group-justified">
                                        <a href="#" class="btn btn-default">Left</a>
                                        <a href="#" class="btn btn-default">Middle</a>
                                        <a href="#" class="btn btn-default">Right</a>
                                    </div>
                                    <div class="clearfix margin-bottom-10"></div>
                                    <div class="btn-group btn-group btn-group-justified">
                                        <a href="#" class="btn red">Left</a>
                                        <a href="#" class="btn blue">Middle</a>
                                        <a href="#" class="btn green">Right</a>
                                    </div>
                                </div>

                                <h3>Button Dropdowns</h3>
                                <div class="clearfix">
                                    <h4 class="block">Default Bootstrap Style</h4>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default">Default</button>
                                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i></button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                    <!-- /btn-group -->
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-primary">Primary</button>
                                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i></button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                    <!-- /btn-group -->
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-success">Success</button>
                                        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i></button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                    <!-- /btn-group -->
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-info">Info</button>
                                        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i></button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                    <!-- /btn-group -->
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-warning">Warning</button>
                                        <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i></button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                    <!-- /btn-group -->
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-danger">Danger</button>
                                        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i></button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                    <!-- /btn-group -->
                                </div>
                                <div class="clearfix">
                                    <h4 class="block">Metronic Style</h4>
                                    <div class="btn-group">
                                        <button type="button" class="btn default">Default</button>
                                        <button type="button" class="btn default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i></button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                    <!-- /btn-group -->
                                    <div class="btn-group">
                                        <button type="button" class="btn blue">Blue</button>
                                        <button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i></button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                    <!-- /btn-group -->
                                    <div class="btn-group">
                                        <button type="button" class="btn green">Green</button>
                                        <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i></button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                    <!-- /btn-group -->
                                    <div class="btn-group">
                                        <button type="button" class="btn red">Red</button>
                                        <button type="button" class="btn red dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i></button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                    <!-- /btn-group -->
                                    <div class="btn-group">
                                        <button type="button" class="btn yellow">Yellow</button>
                                        <button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i></button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                    <!-- /btn-group -->
                                    <div class="btn-group">
                                        <button type="button" class="btn dark">Dark</button>
                                        <button type="button" class="btn dark dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i></button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                    <!-- /btn-group -->
                                    <div class="btn-group">
                                        <button type="button" class="btn purple">Purple</button>
                                        <button type="button" class="btn purple dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i></button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                    <!-- /btn-group -->
                                </div>
                                <div class="clearfix">
                                    <h4 class="block">Sizing</h4>
                                    <!-- Large button group -->
                                    <div class="btn-group">
                                        <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
                                        Large button <i class="fa fa-angle-down"></i>
                                        </button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                    <!-- Small button group -->
                                    <div class="btn-group">
                                        <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
                                        Small button <i class="fa fa-angle-down"></i>
                                        </button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                    <!-- Extra small button group -->
                                    <div class="btn-group">
                                        <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
                                        Extra small button <i class="fa fa-angle-down"></i>
                                        </button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                    <div class="clearfix margin-bottom-10"></div>
                                    <!-- Large button group -->
                                    <div class="btn-group">
                                        <button class="btn red btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
                                        Large button <i class="fa fa-angle-down"></i>
                                        </button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                    <!-- Small button group -->
                                    <div class="btn-group">
                                        <button class="btn blue btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
                                        Small button <i class="fa fa-angle-down"></i>
                                        </button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                    <!-- Extra small button group -->
                                    <div class="btn-group">
                                        <button class="btn green btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
                                        Extra small button <i class="fa fa-angle-down"></i>
                                        </button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="clearfix">
                                    <h4 class="block">Dropup</h4>
                                    <div class="btn-toolbar margin-bottom-10">
                                        <div class="btn-group dropup">
                                            <button type="button" class="btn btn-default">Dropup</button>
                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-up"></i></button>
                                            <ul class="dropdown-menu" role="menu">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <!-- /btn-group -->
                                        <div class="btn-group dropup">
                                            <button type="button" class="btn btn-primary">Right dropup</button>
                                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-up"></i></button>
                                            <ul class="dropdown-menu pull-right" role="menu">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <!-- /btn-group -->
                                    </div>
                                    <div class="btn-toolbar">
                                        <div class="btn-group dropup">
                                            <button type="button" class="btn blue">Dropup</button>
                                            <button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-up"></i></button>
                                            <ul class="dropdown-menu" role="menu">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <!-- /btn-group -->
                                        <div class="btn-group dropup">
                                            <button type="button" class="btn green">Right dropup</button>
                                            <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-up"></i></button>
                                            <ul class="dropdown-menu pull-right" role="menu">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <!-- /btn-group -->
                                    </div>
                                </div>
                                <div class="clearfix">
                                    <h4 class="block">Hoveralbe Dropdowns</h4>
                                    <div class="btn-toolbar margin-bottom-10">
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-default">Dropdown</button>
                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true"><i class="fa fa-angle-down"></i></button>
                                            <ul class="dropdown-menu" role="menu">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <!-- /btn-group -->
                                        <div class="btn-group dropup">
                                            <button type="button" class="btn btn-primary">Dropup</button>
                                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true"><i class="fa fa-angle-up"></i></button>
                                            <ul class="dropdown-menu" role="menu">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <!-- /btn-group -->
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
                                            Dropup <i class="fa fa-angle-down"></i>
                                            </button>
                                            <ul class="dropdown-menu" role="menu">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <!-- /btn-group -->
                                    </div>
                                    <div class="btn-toolbar">
                                        <div class="btn-group">
                                            <button type="button" class="btn blue">Dropdown</button>
                                            <button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true"><i class="fa fa-angle-down"></i></button>
                                            <ul class="dropdown-menu" role="menu">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <!-- /btn-group -->
                                        <div class="btn-group dropup">
                                            <button type="button" class="btn green">Dropup</button>
                                            <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
                                            <i class="fa fa-angle-up"></i></button>
                                            <ul class="dropdown-menu" role="menu">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <!-- /btn-group -->
                                        <div class="btn-group">
                                            <button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
                                            Dropdown <i class="fa fa-angle-down"></i>
                                            </button>
                                            <ul class="dropdown-menu" role="menu">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <!-- /btn-group -->
                                    </div>
                                </div>
                                <div class="clearfix">
                                    <!-- /btn-group -->
                                    <div class="btn-group dropup">
                                        <button type="button" class="btn green">Dropup</button>
                                        <button type="button" class="btn green dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-up"></i></button>
                                        <div class="dropdown-menu hold-on-click dropdown-checkboxes" role="menu">
                                            <label><div class="checker"><span><input type="checkbox"></span></div>Option 1</label>
                                            <label><div class="checker"><span class="checked"><input checked="" type="checkbox"></span></div>Option 2</label>
                                            <label><div class="checker"><span><input type="checkbox"></span></div>Option 3</label>
                                            <label><div class="checker"><span class="checked"><input checked="" type="checkbox"></span></div>Option 4</label>
                                            <label><div class="checker"><span><input type="checkbox"></span></div>Option 5</label>
                                        </div>
                                    </div>
                                    <!-- /btn-group -->
                                    <div class="clearfix margin-top-5">
                                        <span class="label label-success">NOTE:</span>&nbsp;
                                        By adding <code>hold-on-click</code> class you can avoid closing the dropdown on click
                                    </div>
                                </div>

                                <h3>Button States</h3>
                                        <h4>Loading State</h4>
                                        <div class="clearfix">
                                            <button type="button" data-loading-text="Loading..." class="demo-loading-btn btn btn-primary">
                                              Loading state
                                            </button>

                                            <button type="button" data-loading-text="Loading..." class="demo-loading-btn btn btn-default">
                                              Loading state
                                            </button>

                                            <button type="button" data-loading-text="Loading..." class="demo-loading-btn btn red">
                                              Loading state
                                            </button>


                                            <button type="button" data-loading-text="Loading..." class="demo-loading-btn btn blue">
                                              Loading state
                                            </button>
                                        </div>

                                        <h4>Single Toggle</h4>
                                        <div class="clearfix">
                                            <button type="button" class="btn btn-primary" data-toggle="button">
                                                Single toggle
                                            </button>

                                            <button type="button" class="btn btn-default" data-toggle="button">
                                                Single toggle
                                            </button>

                                            <button type="button" class="btn red" data-toggle="button">
                                                Single toggle
                                            </button>

                                            <button type="button" class="btn blue" data-toggle="button">
                                                Single toggle
                                            </button>
                                        </div>

                                        <h4>Checkbox</h4>
                                        <div class="clearfix">
                                            <div class="btn-group" data-toggle="buttons">
                                              <label class="btn default active">
                                                <input class="toggle" type="checkbox"> Option 1
                                              </label>
                                              <label class="btn default">
                                                <input class="toggle" type="checkbox"> Option 2
                                              </label>
                                              <label class="btn default">
                                                <input class="toggle" type="checkbox"> Option 3
                                              </label>
                                            </div>
                                        </div>
                                        <div class="clearfix">
                                            <div class="btn-group" data-toggle="buttons">
                                              <label class="btn btn-default">
                                                <input class="toggle" type="checkbox"> Option 1
                                              </label>
                                              <label class="btn btn-default  active">
                                                <input class="toggle" type="checkbox"> Option 2
                                              </label>
                                              <label class="btn btn-default">
                                                <input class="toggle" type="checkbox"> Option 3
                                              </label>
                                            </div>
                                        </div>

                                        <h4>Radio</h4>
                                        <div class="clearfix">
                                            <div class="btn-group" data-toggle="buttons">
                                              <label class="btn blue active">
                                                <input class="toggle" type="radio"> Option 1
                                              </label>
                                              <label class="btn blue">
                                                <input class="toggle" type="radio"> Option 2
                                              </label>
                                              <label class="btn blue">
                                                <input class="toggle" type="radio"> Option 3
                                              </label>
                                            </div>
                                        </div>
                                        <div class="clearfix">
                                            <div class="btn-group" data-toggle="buttons">
                                              <label class="btn btn-default active">
                                                <input class="toggle" type="radio"> Option 1
                                              </label>
                                              <label class="btn btn-default">
                                                <input class="toggle" type="radio"> Option 2
                                              </label>
                                              <label class="btn btn-default">
                                                <input class="toggle" type="radio"> Option 3
                                              </label>
                                            </div>
                                        </div>
                </div>
                <!-- END SECOND COLUMN -->        
              </div>
              <!-- END TWO COLUMNS -->
    
            </div>
          </div>
          <!-- END CONTENT -->
        </div>
        <!-- END SIDEBAR & CONTENT -->
      </div>
    </div>

    <!-- BEGIN BRANDS -->
    <div class="brands">
      <div class="container">
        <div class="row">
          <div class="bxslider-wrapper">
            <ul class="bxslider" data-slides-phone="1" data-slides-tablet="3" data-slides-desktop="6" data-slide-margin="15">
              <li><a href="#"><img src="assets/temp/brands/canon.jpg" alt="canon" title="canon"></a></li>
              <li><a href="#"><img src="assets/temp/brands/esprit.jpg" alt="esprit" title="esprit"></a></li>
              <li><a href="#"><img src="assets/temp/brands/gap.jpg" alt="gap" title="gap"></a></li>
              <li><a href="#"><img src="assets/temp/brands/next.jpg" alt="next" title="next"></a></li>
              <li><a href="#"><img src="assets/temp/brands/puma.jpg" alt="puma" title="puma"></a></li>
              <li><a href="#"><img src="assets/temp/brands/zara.jpg" alt="zara" title="zara"></a></li>
              <li><a href="#"><img src="assets/temp/brands/canon.jpg" alt="canon" title="canon"></a></li>
              <li><a href="#"><img src="assets/temp/brands/esprit.jpg" alt="esprit" title="esprit"></a></li>
              <li><a href="#"><img src="assets/temp/brands/gap.jpg" alt="gap" title="gap"></a></li>
              <li><a href="#"><img src="assets/temp/brands/next.jpg" alt="next" title="next"></a></li>
              <li><a href="#"><img src="assets/temp/brands/puma.jpg" alt="puma" title="puma"></a></li>
              <li><a href="#"><img src="assets/temp/brands/zara.jpg" alt="zara" title="zara"></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- END BRANDS -->

    <!-- BEGIN STEPS -->
    <div class="steps3 steps3red">
      <div class="container">
        <div class="row">
          <div class="col-md-4 steps3-col">
            <i class="fa fa-truck"></i>
            <div>
              <h2>Free shipping</h2>
              <em>Express delivery withing 3 days</em>
            </div>
            <span>&nbsp;</span>
          </div>
          <div class="col-md-4 steps3-col">
            <i class="fa fa-gift"></i>
            <div>
              <h2>Daily Gifts</h2>
              <em>3 Gifts daily for lucky customers</em>
            </div>
            <span>&nbsp;</span>
          </div>
          <div class="col-md-4 steps3-col">
            <i class="fa fa-phone"></i>
            <div>
              <h2>477 505 8877</h2>
              <em>24/7 customer care available</em>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- END STEPS -->

    <!-- BEGIN PRE-FOOTER -->
    <div class="pre-footer">
      <div class="container">
        <div class="row">
          <!-- BEGIN BOTTOM ABOUT BLOCK -->
          <div class="col-md-3 col-sm-6 pre-footer-col">
            <h2>About us</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam sit nonummy nibh euismod tincidunt ut laoreet dolore magna aliquarm erat sit volutpat. Nostrud exerci tation ullamcorper suscipit lobortis nisl aliquip  commodo consequat. </p>
            <p>Duis autem vel eum iriure dolor vulputate velit esse molestie at dolore.</p>
          </div>
          <!-- END BOTTOM ABOUT BLOCK -->
          <!-- BEGIN BOTTOM INFO BLOCK -->
          <div class="col-md-3 col-sm-6 pre-footer-col">
            <h2>Information</h2>
            <ul class="list-unstyled">
              <li><i class="fa fa-angle-right"></i> <a href="#">Delivery Information</a></li>
              <li><i class="fa fa-angle-right"></i> <a href="#">Customer Service</a></li>
              <li><i class="fa fa-angle-right"></i> <a href="#">Order Tracking</a></li>
              <li><i class="fa fa-angle-right"></i> <a href="#">Shipping & Returns</a></li>
              <li><i class="fa fa-angle-right"></i> <a href="contacts.html">Contact Us</a></li>
              <li><i class="fa fa-angle-right"></i> <a href="#">Careers</a></li>
              <li><i class="fa fa-angle-right"></i> <a href="#">Payment Methods</a></li>
            </ul>
          </div>
          <!-- END INFO BLOCK -->
          <!-- BEGIN TWITTER BLOCK --> 
          <div class="col-md-3 col-sm-6 pre-footer-col">
            <h2>Latest Tweets</h2>
            <dl class="dl-horizontal f-twitter">
              <dt><i class="fa fa-twitter"></i></dt>
              <dd>
                <a href="#">@keenthemes</a>
                Imperdiet condimentum diam dolor lorem sit consectetur adipiscing
                <span>3 min ago</span>
              </dd>
            </dl>                    
            <dl class="dl-horizontal f-twitter">
              <dt><i class="fa fa-twitter"></i></dt>
              <dd>
                <a href="#">@keenthemes</a>
                Imperdiet condimentum diam dolor lorem sit consectetur adipiscing
                <span>3 min ago</span>
              </dd>
            </dl> 
            <dl class="dl-horizontal f-twitter">
              <dt><i class="fa fa-twitter"></i></dt>
              <dd>
                <a href="#">@keenthemes</a>
                Imperdiet condimentum diam dolor lorem sit consectetur adipiscing
                <span>3 min ago</span>
              </dd>
            </dl>           
          </div>
          <!-- END TWITTER BLOCK -->
          <!-- BEGIN BOTTOM CONTACTS -->
          <div class="col-md-3 col-sm-6 pre-footer-col">
            <h2>Our Contacts</h2>
            <address class="margin-bottom-40">
              35, Lorem Lis Street, Park Ave<br>
              California, US<br>
              Phone: 300 323 3456<br>
              Fax: 300 323 1456<br>
              Email: <a href="mailto:info@metronic.com">info@metronic.com</a><br>
              Skype: <a href="skype:metronic">metronic</a>
            </address>
          </div>
          <!-- END BOTTOM CONTACTS -->
        </div>
        <hr>
        <div class="row">
          <!-- BEGIN SOCIAL ICONS -->
          <div class="col-md-6 col-sm-6">
            <ul class="social-icons">
              <li><a class="rss" data-original-title="rss" href="#"></a></li>
              <li><a class="facebook" data-original-title="facebook" href="#"></a></li>
              <li><a class="twitter" data-original-title="twitter" href="#"></a></li>
              <li><a class="googleplus" data-original-title="googleplus" href="#"></a></li>
              <li><a class="linkedin" data-original-title="linkedin" href="#"></a></li>
              <li><a class="youtube" data-original-title="youtube" href="#"></a></li>
              <li><a class="vimeo" data-original-title="vimeo" href="#"></a></li>
              <li><a class="skype" data-original-title="skype" href="#"></a></li>
            </ul>
          </div>
          <!-- END SOCIAL ICONS -->
          <!-- BEGIN NEWLETTER -->
          <div class="col-md-6 col-sm-6">
            <div class="pre-footer-subscribe-box pull-right">
              <h2>Newsletter</h2>
              <form action="#">
                <div class="input-group">
                  <input type="text" placeholder="youremail@mail.com" class="form-control">
                  <span class="input-group-btn">
                    <button class="btn btn-primary" type="submit">Subscribe</button>
                  </span>
                </div>
              </form>
            </div> 
          </div>
          <!-- END NEWLETTER -->
        </div>
      </div>
    </div>
    <!-- END PRE-FOOTER -->

    <!-- BEGIN FOOTER -->
    <div class="footer padding-top-15">
      <div class="container">
        <div class="row">
          <!-- BEGIN COPYRIGHT -->
          <div class="col-md-6 col-sm-6 padding-top-10">
            2014 © Metronic Shop UI. ALL Rights Reserved. 
          </div>
          <!-- END COPYRIGHT -->
          <!-- BEGIN PAYMENTS -->
          <div class="col-md-6 col-sm-6">
            <ul class="list-unstyled list-inline pull-right margin-bottom-15">
              <li><img src="assets/img/payments/western-union.jpg" alt="We accept Western Union" title="We accept Western Union"></li>
              <li><img src="assets/img/payments/american-express.jpg" alt="We accept American Express" title="We accept American Express"></li>
              <li><img src="assets/img/payments/MasterCard.jpg" alt="We accept MasterCard" title="We accept MasterCard"></li>
              <li><img src="assets/img/payments/PayPal.jpg" alt="We accept PayPal" title="We accept PayPal"></li>
              <li><img src="assets/img/payments/visa.jpg" alt="We accept Visa" title="We accept Visa"></li>
            </ul>
          </div>
          <!-- END PAYMENTS -->
        </div>
      </div>
    </div>
    <!-- END FOOTER -->

    <!-- Load javascripts at bottom, this will reduce page load time -->
    <!-- BEGIN CORE PLUGINS(REQUIRED FOR ALL PAGES) -->
    <!--[if lt IE 9]>
    <script src="assets/plugins/respond.min.js"></script>  
    <![endif]-->  
    <script src="assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>      
    <script type="text/javascript" src="assets/plugins/back-to-top.js"></script>   
    <script type="text/javascript" src="assets/plugins/jQuery-slimScroll/jquery.slimscroll.min.js"></script> 
    <!-- END CORE PLUGINS -->

    <!-- BEGIN PAGE LEVEL JAVASCRIPTS(REQUIRED ONLY FOR CURRENT PAGE) -->
    <script type="text/javascript" src="assets/plugins/fancybox/source/jquery.fancybox.pack.js"></script>
    <script type="text/javascript" src="assets/plugins/bxslider/jquery.bxslider.min.js"></script><!-- slider for products -->
    <script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript" ></script>

    <script type="text/javascript" src="assets/scripts/app.js"></script>   
    <script type="text/javascript">
      jQuery(document).ready(function() {
        App.init();
        App.initBxSlider();
        App.initUniform(); 
      });
    </script>
    <!-- END PAGE LEVEL JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>